<template>
  <div>
    <div>Polygon</div>
    <div class="mapContainer" id="mapContainer" ref="mapContainerRef"></div>
    <div class="showBox" id="showBox">弹窗内容</div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import "echarts-gl";
import "echarts-liquidfill";
import { onMounted, ref } from "vue";
import useEchartMapOption from "./use-echart-map-option";

const mapContainerRef = ref(null);
let myChart: any;
const mapName: string = "guangzhou";
const polygonName: string = "polygon";

const getMapData = async (mapName: string) => {
  const response = await fetch(`./public/data/${mapName}.geojson`); // 请将'china.json'替换为实际的地图数据文件路径
  return await response.json();
};

const init = async () => {
  myChart = echarts.init(mapContainerRef.value);
  // const emptyGeoJSON = {
  //   "type": "FeatureCollection",
  //   "features": []
  // };

  echarts.registerMap('polygonLayer', "[]");

  const { getOption } = useEchartMapOption(mapName);
  const option = getOption();
  const chinaGeoJson = await getMapData(mapName);
  const polygonGeoJson = await getMapData(polygonName);
  echarts.registerMap(mapName, chinaGeoJson); // 注册可用地图，名称需要一致
  echarts.registerMap(polygonName, polygonGeoJson); // 注册可用地图，名称需要一致
  console.log("option", option);

  myChart.setOption(option);
  clickFn();
};

const clickFn = () => {
  myChart.off('click');
  myChart.on('click', function (params) {
    console.log("params", params);
    if (params.seriesType === "map") {
      console.log("区块点击");
      fixingPositon()
    }

    function fixingPositon() {
      const e = event || window.event,
        top = e.clientY, left = e.clientX,
        boxDom = document.querySelector('#showBox');
      const offsetX = boxDom.clientWidth;
      const offsetY = boxDom.clientHeight;
      boxDom.style.top = `${top - offsetY - 25}px`;
      boxDom.style.left = `${left + offsetX / 3}px`;
    }
  })
}

onMounted(() => {
  init();
});
</script>

<style scoped>
.mapContainer {
  width: 1200px;
  height: 800px;
  border: 0.0625rem solid #000;
  position: relative;
}

.showBox {
  width: 100px;
  height: 50px;
  background: forestgreen;
  position: absolute;
}
</style>
